<template>
    <div class="operation">
        <div class="operation-heder-t">
            <HeadTop :title="headTitle"></HeadTop>
        </div>
        <div class="operation-con">
          <div>
            <div class="search-left">
              <img src="../../../../assets/search.png" />
              <input placeholder="搜索历史报表" />
            </div>
            <div class="search-right" @click="getAdd()"><img src="../../../../assets/icon-edit.png">填写</div>
          </div>
          <div class="tabList">历史报表</div>

          <listOne
                  :tabIdx="tabIdx"
                  :resultDetail="resultDetail"
                  :pageSize="pageSize"
                  :pageCount="pageCount"
                  :dataType="dataType"
                  v-on:showChange="showChange2"
                  v-on:pageChange="pageChange"
          ></listOne>
        </div>
    </div>
</template>

<script >
import { getDutyList, getReportById,logo2} from '../../../../api/index.js'
import listOne from './components/listOne.vue'
import HeadTop from '../../../../components/headTop.vue'
export default {
  data () {
    return {
      // flag: flag, // 控制是否跳到指定页面
      headTitle: '值班交接',
      tabIdx: -1,
      page: 1,
      pageSize: 10,
      pageCount: 0,
      resultDetail: {},
      dataType: [],
      nightShiftPatrol: []
    }
  },
  methods: {
    async detailTabChange (index) {
      this.$router.push({path: '/laboratory/manage', query: {index: index}})
      this.tabIdx = -1
      this.fishListIdx = -1
    },

    getUrl () {
      this.$router.go(-1)
    },
    getAdd () {
      this.$router.push({path: '/laboratory/addJoin'})
    },
    async getData () {
      const data = {
        page: this.page,
        pageSize: this.pageSize
      }
      // data = JSON.stringify(data)
      if (this.startDate !== '') {
        data.startDate = this.startDate
        data.endDate = this.endDate
      }
      // if (this.fishListIdx !== -1) {
      //   data.keyword = this.fishList[this.fishListIdx].id
      //   // debugger
      // }
      // debugger
      let result
      result = await getDutyList(data)
      this.pageCount = result.data.page.pageCount
      let dataType = this.dataType
      let msg = result.data.result
      msg.map(v => {
        dataType.push(v)
      })

      this.dataType = dataType
    },
    pageChange (event) {
      this.page = ++this.page
      this.getData()
    },
    async showChange2 (index, id, type) {
      if (this.tabIdx !== index) {
        this.resultDetail = (await getReportById(id, type)).data
        // debugger
        // this.nightShiftPatrol = JSON.parse(this.resultDetail.nightShiftPatrol)
        // console.log('=======>', this.nightShiftPatrol)
        this.tabIdx = index
      } else {
        this.tabIdx = -1
        this.resultDetail = {}
      }
    }
  },
  async mounted () {
    this.getData()
    await logo2()

    // debugger
  },
  components: {
    HeadTop,
    listOne
  }
}
</script>

<style>
  body {
    width: 100%;
    height: 100%;
    position: relative;
    background: #ebebeb
  }
</style>
<style  lang="stylus" rel="stylesheet/stylus" scoped>
.operation
  .operation-heder-t
    top: 0;
    left: 0;
    width: 750px;
    background: #fff;
  .operation-con
    // min-height: 1300px;
    // background: #ebebeb;
    width 690px
    padding: 30px;
    &>div
      display flex
      align-items center
      .search-left
        width 499px
        display flex
        align-items center
        background #fff
        width 499px
        height 75px
        border-radius 10px
        &>img
          width 31px
          height 31px
          margin-left 36px
          margin-right 16px
        &>input
          width 360px
          font-size 28px
      &>div
        display flex
    .search-right
      width 166px
      height 75px
      display flex
      align-items center
      justify-content center
      font-size 32px
      background #fff
      border-radius 10px
      margin-left 27px
      &>img
        width 31px
        height 33px
        margin-right 12px
    .tabList
      font-size 28px
      color #a0a0a0
      margin-top 51px
</style>
